<template>
  <!-- 调用 DataList 子组件，并传递相应的 props 和事件处理函数 -->
  <DataList :columns="columns" :data-list="dataList" @edit="handleEdit" @delete="handleDelete" @SelectionChanged="handleSelectionChanged"> </DataList>
</template>

<script setup>
// 引入 DataList 子组件以及 ref 函数
import DataList from '@/components/datalist/DataList.vue'
import { ref } from 'vue'

// 使用 ref 创建响应式变量
const dataList = ref([
  { id: 1, name: 'John Doe', age: 28 },
  { id: 2, name: 'Jane Doe', age: 35 }
])

// 定义表格列的数据
const columns = ref([
  { prop: 'id', label: 'ID', width: '80' },
  { prop: 'name', label: '用户名' },
  { prop: 'age', label: '年龄' }
])

// 子传父的事件处理函数
const handleEdit = (row) => {
  // 编辑事件处理函数
  console.log('编辑行数据', row)
}

const handleDelete = (row) => {
  // 删除事件处理函数
  console.log('删除行数据', row)
}

// 处理选中行数据变化事件
const handleSelectionChanged = (selectedRows) => {
  console.log('选中行数据:', selectedRows)
}
</script>
